<template>
    <div class="container-talentList" @click="clickList">
        <div class="list-top">
            <div class="list-left">
                <div>
                    <img class="list-header" :src="listInfo.headPortrait || require('@/assets/img/user.png')" />
                </div>
                <div class="list-user">{{listInfo.name}}</div>
                <div class="list-info">
                    <template v-for="(item,idx) in listInfo.territory">
                        <div class="my-type-list" :key="item" v-if="idx<2">{{item}}</div>
                    </template>
                    <div class="my-type-list" v-if="!listInfo.territory||listInfo.territory.length===0" style="opacity:0">null</div>

                </div>
            </div>
            <div class="list-right">
                <div class="list-info" v-if="listInfo.placeCollege">
                    <span class="info-title">所属学院：</span>
                    <div class="info-words text-nowarp">
                        <template v-for="(item,idx) in JSON.parse(listInfo.placeCollege)">
                            {{item}},
                        </template>
                    </div>

                </div>
                <div class="list-info" v-if="listInfo.placeUnit">
                    <span class="info-title">所属单位：</span>
                    <span class="info-words">{{listInfo.placeUnit}}</span>
                </div>
                <div class="list-info">
                    <span class="info-title">联系方式：</span>
                    <span class="info-words">{{listInfo.phone}}</span>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script lang="ts">
import { UserModule } from "@/store/modules/userModules";
import { getStorageUserInfo } from "@/utils";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: {} }) listInfo!: any;
    @Prop({ default: "" }) pageType!: string;
    clickList() {
        this.jumpDetail();
    }
    jumpDetail() {
        // 如果没登录 提示登录
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true);
            this.$message.warning("您还没有登录，请登录后重试");
            return;
        }

        const route = this.$router.resolve({ name: "talentDetail", query: { id: this.listInfo.id, pageType: this.pageType } });

        // 在新窗口中打开路由
        window.open(route.href, "_blank");
        //this.$router.push({ name: "talentDetail", query: { id: this.listInfo.id, pageType: this.pageType } });
    }
}
</script>

<style lang="scss">
.container-talentList:nth-child(2n) {
    margin-right: 0;
}
.container-talentList {
    width: 49%;
    margin-right: 2%;
    box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 8px;
    display: inline-block;
    padding: 20px;
    vertical-align: top;

    .list-top {
        display: flex;
        align-items: center;
    }
    .list-left {
        width: 200px;
        flex-shrink: 0;
        text-align: center;
    }
    .list-right {
        flex-grow: 1;
        flex-shrink: 0;
    }
    .list-header {
        width: 100px;
        height: 100px;
        border-radius: 110px;
    }
    .list-user {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        margin: 10px 0;
    }
    .list-info {
        margin-bottom: 10px;
    }
    .info-title {
        font-size: 16px;
        color: #82848a;
        display: inline-block;
    }
    .info-words {
        font-size: 16px;
        color: #333;
        display: inline-block;
        vertical-align: top;
        max-width: 200px;
    }
}
</style>
